<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../dist/lala-ui.css">
    <link rel="stylesheet" href="./mine.css">
    <title>个人中心</title>
</head>
<body class="page-mine">
    <!-- 底部导航栏 -->
    <div class="tt-navbar">
        <a class="navbar-item" href="./index.html">
            <i class="fa fa-home icon"></i>
            <span class="name">首页</span>
        </a>
        <a class="navbar-item" href="./list.html">
            <i class="fa fa-search icon"></i>
            <span class="name">发现</span>
        </a>
        <a class="navbar-item active">
            <i class="fa fa-user icon"></i>
            <span class="name">我的</span>
        </a>
    </div>
    <!-- 内容区 -->
    <div class="tt-content">
        <!-- 用户个人信息 -->
        <div class="tt-panel-body user">
            <img class="portrait" src="../demo//img/list-img.jpg"  alt="用户头像">
            <div class="info">
                <h2 class="nick-name">王起灵</h2>
                <p class="detail">
                    <a href="#" class="detail-item">关注 99999</a>
                    <a href="#" class="detail-item">收藏 99999</a>
                </p>
            </div>
        </div>
        <!-- 菜单区域 -->
        <div class="tt-panel-body no-padding">
            <div class="tt-menu">
                <a href="#" class="tt-menu-item">
                    <p class="tt-menu-name">我的钱包</p>
                    <i class="fa fa-chevron-right tt-menu-icon"></i>
                </a>
                <a href="#" class="tt-menu-item">
                    <p class="tt-menu-name">我的文章</p>
                    <i class="fa fa-chevron-right tt-menu-icon"></i>
                </a>
                <a href="#" class="tt-menu-item">
                    <p class="tt-menu-name">访问统计</p>
                    <i class="fa fa-chevron-right tt-menu-icon"></i>
                </a>
                <a href="#" class="tt-menu-item">
                    <p class="tt-menu-name">我的推广码</p>
                    <i class="fa fa-qrcode tt-menu-value"></i>
                    <i class="fa fa-chevron-right tt-menu-icon"></i>
                </a>
                <a href="#" class="tt-menu-item">
                    <p class="tt-menu-name">接收新消息</p>
                    <input class="tt-switch" type="checkbox">
                </a>
            </div>
        </div>
        <div class="tt-panel-body no-padding">
            <div class="tt-menu">
                <a href="#" class="tt-menu-item">
                    <p class="tt-menu-name">设置</p>
                    <i class="fa fa-chevron-right tt-menu-icon"></i>
                </a>
                <a href="#" class="tt-menu-item">
                    <p class="tt-menu-name">意见反馈</p>
                    <i class="fa fa-chevron-right tt-menu-icon"></i>
                </a>
            </div>
        </div>
        <div class="tt-panel-body no-padding">
            <span class="tt-btn tt-btn-large logout-btn">退出登录</span>
        </div>
    </div>

    <!-- 显示我的推广二维码 -->
    <div class="tt-modal">
    <!-- 需要打开二维码在tt-modal上添加show类 -->
    <!-- <div class="tt-modal show"> -->
        <div class="tt-mask"></div>
        <div class="tt-modal-wrap">
            <div class="tt-modal-body no-padding">
                <img class="tt-modal-img" src="../demo/img/tuitui.jpg" alt="">
            </div>
            <i class="fa fa-close tt-modal-close"></i>
        </div>
    </div>

    <!-- 确认关闭新消息提醒 -->
    <div class="tt-action-sheet">
    <!-- 如需打开弹窗， 添加show类即可 -->
    <!-- <div class="tt-action-sheet show"> -->
        <div class="tt-mask"></div>
        <div class="tt-action-sheet-wrap">
            <div class="tt-action-sheet-header">
                <h1 class="tt-action-sheet-title">关闭该功能后，您将不再收到新消息的通知，确定要这样做吗？</h1>
            </div>
            <div class="tt-action-sheet-body">
                <a class="tt-action-sheet-menu">关闭新消息提醒</a>
            </div>
            <div class="tt-action-sheet-footer">
                <a class="tt-action-sheet-menu">取消</a>
            </div>
        </div>
    </div>
</body>
</html>